<% import Phoenix.HTML %>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Configure Farmbot's Network </title>
    <link rel="stylesheet" href="/styles.css">
    <script src="security_icon_lookup.js"></script>
    <script type="text/javascript">

    function selectSsid(ssid, bssid, security, level) {
      console.log("you selected "+ ssid);

      var derp = document.getElementsByName("ssidSelector");
      document.getElementById("manualssid").value = "";
      for(var i = 0; i < derp.length; i++) derp[i].classList.remove("selected");

      if (level < 20) {
        console.error("signal strength too low");
        document.getElementById("hiddenssidinput").value = null;
        document.getElementById("hiddensecurityinput").value = null;
        document.getElementById("error-text").textContent =
          "Please select a WIFI network with adequate signal strength.";
        return;
      }

      document.getElementById("hiddenssidinput").value = ssid;
      document.getElementById("hiddensecurityinput").value = security;

      document.getElementById("error-text").textContent = "";
      document.getElementById(bssid).classList.add("selected");
    }

    function enableSsidInput() {
      var elem = document.getElementById("manualssid");
      elem.hidden=false;
      elem.focus();
    }

    function rescan() {
      window.location.reload(true);
    }

    </script>

  </head>

  <body>
    <h1>Configure FarmBot <%= version %> </h1>
    <div class="widget">
      <div class="widget-header">
        <h5>Configure Wireless</h5>
        <button class="rescan" onclick='rescan()'>SCAN</button>
      </div>
      <div class="widget-content">
        <form action=<%= post_action %> method="post" id="ssid_select_form">
          <fieldset>
            <table class="table">
              <tr class="table-header">
                <th><label>WiFi Network Name</label></th>
                <th class="centered"><label>Strength</label></th>
                <th class="centered"><label>Security</label></th>
              </tr>
              <%= for ssid_result <- ssids do %>
                <%= if ssid_result.ssid && String.printable?(ssid_result.ssid) do %>
                  <tr id="<%= ssid_result.bssid %>" name="ssidSelector" class="ssid_result"
                    onclick='selectSsid("<%= javascript_escape(ssid_result.ssid) %>", "<%= javascript_escape(ssid_result.bssid) %>", "<%= javascript_escape(to_string(ssid_result.security)) %>", "<%= javascript_escape(to_string(ssid_result.level)) %>")' >
                    <td class="ssid_name"> <%= ssid_result.ssid || "hidden network" %> </td>
                    <td class="ssid_quality">
                      <script>
                        var percent = <%= ssid_result.level %>;
                        var color = "green";
                        var label = "good";
                        if (percent < 20) {
                          color = "light-gray";
                          document.write(`<p class="too-weak" style="left: ${percent}%">too weak</p>`);
                        } else if (percent < 68) {
                          color = "red";
                          document.write(`<p class="strength-label weak" style="left: ${percent}%">weak</p>`);
                        } else if (percent < 84) {
                          color = "yellow";
                          document.write(`<p class="strength-label ok">ok</p>`);
                        } else {
                          document.write(`<p class="strength-label good">good</p>`);
                        }
                        document.write(`<div class="percent-bar ${color}" style="width: ${percent}%" title="${percent}%" />`);
                      </script>
                    </td>
                    <td class="ssid_security centered">
                      <script>
                        var icon = security_icon_lookup["<%= ssid_result.security %>"];
                        if (!icon) { icon = "icon_unknown.svg"; }
                        document.write(`<img src="${icon}" title="<%= ssid_result.security %>" />`)
                      </script>
                    </td>
                  </tr>
                <% end %>
              <% end %>
            </table>

            <label for="manualssid" class="customSsidInput" onclick="enableSsidInput()">Manual Input</label>
            <input type="text" name="manualssid" id="manualssid"/>
            <input name="security" id="hiddensecurityinput" hidden/>
            <input name="ssid" id="hiddenssidinput" hidden/>
            <input name="ifname" id="ifname" value="<%= ifname %>" hidden/>
          </fieldset>

          <p id="error-text" class="error-text"></p>

          <div class="button"> <input type="submit" value="next"> </div>
        </form>
      </div>
    </div>
  </body>
</html>
